<!--
 * @Author: your name
 * @Date: 2021-07-05 20:54:23
 * @LastEditTime: 2021-07-06 21:33:17
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue_shop_mananger\src\components\users\components\uDialog\uDialog.vue
-->
<template>
  <div class="uDialog">
    <!-- 头部 -->
    <el-dialog title="添加用户" :visible.sync="dialogVisible" width="50%" @close="addDialogClosed" >
      <!-- 内容区 -->
      <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="addForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="addForm.password"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="addForm.email"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="mobile">
          <el-input v-model="addForm.mobile"></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUser">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      //自定义校验规则:邮箱
      var checkEmail=(rules,value,fn)=>{
        const regEmail=/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
        if(regEmail.test(value)){
          //合法邮箱
          return fn();
        }
        fn(new Error('请输入正确邮箱！'))
      };
      //自定义校验规则:电话
      var checkMobile=(rules,value,fn)=>{
        const regMobile=/1[3|5|7|8|]\d{9}/
        if(regMobile.test(value)){
          //合法电话
          return fn();
        }
        fn(new Error('请输入正确电话号码！'))
      };
      return {
        dialogVisible: false,
        addForm:{
          username:'',
          password:'',
          email:'',
          mobile:''

        },
        addFormRules:{
          username:[
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
          ],
          password:[
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
          ],
          email:[
            { required: true, message: '请输入邮箱', trigger: 'blur' },
            { validator: checkEmail, trigger: 'blur' }
          ],
          mobile:[
            { required: true, message: '请输入电话', trigger: 'blur' },
            { validator: checkMobile, trigger: 'blur' }
          ],

        },
      }
    },
    methods: {
      addDialogClosed(){
        //console.log('123');
        this.$refs.addFormRef.resetFields();
      },
       addUser(){
        this.$refs.addFormRef.validate(async (vaild)=>{
          if(!vaild)return;
          const{data:res}=await this.$http.post('users',this.addForm)
          if (res.meta.status!==201) {
            //console.log(res);
            return this.$message.error('添加用户失败！')
          }
          this.$message.success('添加用户成功！')
          this.dialogVisible=false;
          this.$emit('resetUserEmit')
        })
      }
    },


  }
</script>
<style lang="scss" scoped>

</style>